<template>
	<view class="content">
	    <view class="login">
			<view class="ttiles">Z-BLOG博客管理系统</view>
			<view class="inputs">
				<u-field
					v-model="forms.username"
					label="用户名"
					placeholder="请填写用户名"
					:clearable="false"
				>
				</u-field>
				<u-field
					v-model="forms.password"
					label="密码"
					placeholder="请填写密码"
					type="password"
					:clearable="false"
				>
				</u-field>
			</view>
			<view class="loginandzhuce">
				<button type="primary" style="width: 150px;"  @click="gotologins">登录</button>
				<button type="warn"  style="width: 150px;" disabled="true">注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex';
	import api from '../../api/api.js';
	export default {
		computed: {
			...mapGetters(['leftWinActive', 'colorList'])
		},
		data() {
			return {
				forms:{
					username:'',
					password:''
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			gotologins(){
				if(!this.forms.username || !this.forms.password){
					uni.showToast({
						title: '请输入用户名或者密码',
						icon: 'none'
					})
					return;
				}
				const datas = this.forms;
				api.logins(datas).then((res)=>{
					console.log('res11122',res.uid);
					if(res.code == 1){
						uni.setStorageSync('token',res.token);
						uni.setStorageSync('uid',Number(res.uid));
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						})
						setTimeout(()=>{
							uni.redirectTo({
								url:"/pages/index/index"
							})
						},1000)
					}
				})
			}
		}
	}
</script>

<style>
	.content{ width: 100vw; height: 100vh; background:#27ae60; display: flex; justify-content: center; align-items: center;}
	.login{ width: 450px; height: 350px; background-color: #fff;border-radius: 5px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
	.ttiles{ font-size: 30px; margin-bottom: 30px;}
	.loginandzhuce{ display: flex; justify-content: space-between; width: 100%; margin-top: 30px;}
</style>
